<template>
    <div class="members">
        <Title :title="title" :subtitle="subtitle" :titleColor="titleColor" :subtitleColor="subtitleColor" />
        <div class="members-content">
            <div class="name">会员们的动态交流社区</div>
            <div class="dynamic">
                <div class="list" v-for="item in membersData" :key="item.id">
                    <NuxtLink :to="localePath(`/members/community/${item.id}`)">
                        <div class="title">{{ item.title }}</div>
                        <div class="desc">{{ item.desc }}</div>
                        <div class="line">
                            <div class="time">{{ item.time }}</div>
                            <img src="/icon/index/icon3.png" alt="">
                        </div>
                    </NuxtLink>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import Title from '@/components/index/Title.vue'
const { $fetchGov } = useNuxtApp()
const localePath = useLocalePath()

const { data: members } = await useAsyncData(`members-${new Date().getTime()}`, () => {
    return $fetchGov('/app/api/channel/alias/members', {
        params: {
            isArticle: true,
            articleTotal: 6,
            _t: Date.now()
        }
    });
});

const membersData = computed(() => {
    return members.value?.data?.articleList || [];
})

const title = computed(() => {
    return members.value?.data?.name || '';
});

const subtitle = 'Member section'
const titleColor = ref('#fff');
const subtitleColor = ref('#AFD1FC');

</script>
<style scoped>
.members-content {
    width: 1200px;
    margin: 1.5rem auto;
    height: 100%;
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .name {
        font-size: 1.2rem;
        color: #333;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 4.5rem;
            height: .15rem;
            background-color: #1867CA;
        }
    }
    .dynamic{
        display: flex;
        flex-wrap: wrap;
        justify-content:left;
        gap: 2%;
        margin-top: 1.5rem;
        .list{
            width: 32%;
            margin-bottom: 1rem;
            padding: 1rem;
            border-radius: 5px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            transition: all .3s ease-in-out;
            cursor: pointer;
            a{
                text-decoration: none;
            }
            &:hover{
                box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
                .title{
                    color: #1867CA;
                }
            }
            .title{
                font-size: 1rem;
                color: #333;
                height: 3rem;
                line-height: 1.6rem;
                margin-bottom: .5rem;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            .desc{
                font-size: .9rem;
                color: #666;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                margin-bottom: .7rem;
             }
             .line{
                display: flex;
                flex-wrap: wrap;
                /* justify-content: space-between; */
                .time{
                    font-size: .8rem;
                    color: #999;
                }
                img{
                    width:.8rem;
                    height: .8rem;
                }
             }
             
        }
    }
    @media screen and (max-width: 768px)  {
        width: 100%;
        margin-top: 1rem;
        padding: 1rem;
       .dynamic{
           display: block;
           .list{
               width: 100%;
               &:nth-last-child(1){
                    margin-bottom: 0;
               }
           }
       }
    }
}
</style>